<template>
    <div class="con">
        <div class="sale">
            <el-input style="width:16.7%" placeholder="请输入用户头像" v-model="tableDataInfo.avatarUrl" clearable></el-input>
            <el-input style="width:16.7%" placeholder="请输入用户名" v-model="tableDataInfo.userName"></el-input>
            <el-input style="width:16.7%" placeholder="请输入出租时间" v-model="tableDataInfo.saleDate"></el-input>
            <el-input style="width:16.7%" placeholder="请输入出租内容" v-model="tableDataInfo.saleText"></el-input>
            <el-input style="width:16.7%" placeholder="请输入出租图片" v-model="tableDataInfo.saleImage"></el-input>
            <el-button style="width:16%" type="primary" @click="add()">增加</el-button>
            <el-table :data="isselect
                ? selectData.filter(data => !search || data.name.toLowerCase().includes(search.toLowerCase()))
                : tableData.filter(data => !search || data.name.toLowerCase().includes(search.toLowerCase()))">
                <el-table-column prop="avatarUrl" label="用户头像" fixed>
                    <template slot-scope="scope">
                        <img :src=scope.row.url alt="这是图片" style="width: 80px;height: 80px;"
                            @click="show(list, scope.$index)">
                    </template>
                </el-table-column>
                <el-table-column prop="userName" label="用户名" fixed>
                </el-table-column>
                <el-table-column prop="saleDate" label="出租时间" fixed>
                </el-table-column>
                <el-table-column prop="saleText" label="出租内容" fixed>
                </el-table-column>
                <el-table-column prop="saleImage" label="出租图片" fixed>
                    <template slot-scope="scope">
                        <img :src=scope.row.url alt="这是图片" style="width: 80px;height: 80px;"
                            @click="show(list, scope.$index)">
                    </template>
                </el-table-column>
                <el-table-column align="center" label="操作">
                    <template slot="header" slot-scope="scope">
                        <el-input v-model="select" size="mini" placeholder="输入关键字搜索" style="width: 60%;height: 30%;" />
                        <el-button @click="selectUser(scope.$index)" type="primary" style="width: 40%;height: 30%;">搜索</el-button>
                    </template>
                    <template slot-scope="scope">
                        <el-button-group aligin:right>
                            <el-button style="width: 33.3%;" @click="getTopMove(scope.row, scope.$index)"
                                :disabled="scope.$index == 0">置顶</el-button>
                            <el-button style="width: 33.3%;" @click="edit(scope.$index, scope.row)">编辑</el-button>
                            <el-button @click="del(scope.$index)" style="background: red;color: white;width: 33.3%;">删除</el-button>
                        </el-button-group>
                    </template>
                </el-table-column>
            </el-table>
            <el-pagination background layout="prev, pager, next" :total="totalPage" 
                @current-change="currentPage">
            </el-pagination>
            <div v-show="ifshow">
                修改用户头像<el-input style="width:36%" v-model="dataEdit.avatarUrl"></el-input>
                修改用户名<el-input style="width:36%" v-model="dataEdit.userName"></el-input>
                修改出租时间<el-input style="width:36%" v-model="dataEdit.saleDate"></el-input>
                修改出租内容<el-input style="width:36%" v-model="dataEdit.saleText"></el-input>
                修改出租图片<el-input style="width:36%" v-model="dataEdit.saleImage"></el-input>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    data() {
        return {
            text: '',
            ifshow: false,
            tableData: [],
            selectData: [],
            tableDataInfo: {
                avatarUrl: '',
                userName: '',
                saleDate: '',
                saleText: '',
                saleImage:''
            },
            dataEdit: {
                avatarUrl: '',
                userName: '',
                saleDate: '',
                saleText: '',
                saleImage:''
            },
            searchResult: [],
            pageSizes: [1, 2, 3, 4],
            pageSize: 5,
            totalPage: 1,
            search: '',
            drawer: false,
            isselect: false,
            select: '',
            allData: [],
            pageNo: 1,//表格页码
            pageCount: 10,//数据数
            currentNo: 1,//当前页码
        };
    },
    created() {
        this.searchResult = this.tableData //存储
    },
    methods: {
        // 显示缩略图
        show(file, index) {
            this.dialogVisible = true;
            console.log(file[index]);
            this.dialogImageUrl = file[index].url;
        },
        // 显示
        async put() {
            let result = await this.$axios.post("http://localhost:3000/putSale");
            this.tableData = result.data.List
            // console.log(this.tableData);
        },
        //增
        async add() {
            await this.$axios.post('http://localhost:3000/addSale',
                {
                    saleId:this.tableDataInfo.SaleId,
                    avatarUrl: this.tableDataInfo.avatarUrl,
                    userName: this.tableDataInfo.userName,
                    saleDate: this.tableDataInfo.saleDate,
                    saleText: this.tableDataInfo.saleText,
                    saleImage: this.tableDataInfo.saleImage
                })
                .then(res => {
                    console.log(res.data);
                    if (res.data.code == 200) {
                        alert('添加成功')
                    }
                    if (res.data.code == 400) {
                        alert('用户名已存在')
                    }
                })
                .catch(err => {
                    console.log('操作失败' + err);
                })
        },
        // 删
        async del(index) {
            // console.log(tableData);
            await this.$axios.post('http://localhost:3000/delSale',
                {
                    saleId: this.tableData[index].saleId
                })
                .then(res => {
                    console.log(res.data);
                    if (res.data.code == 200) {
                        alert('删除成功')

                    }
                    if (res.data.code == 202) {
                        alert('删除失败')
                    }
                })
                .catch(err => {
                    console.log('操作失败' + err);
                })
        },
        // 改
        async edit(index, row) {
            this.ifshow = !this.ifshow
            this.dataEdit = row
            // console.log(this.ifshow);
            if (this.ifshow == false) {
                await this.$axios.post('http://localhost:3000/editSale',
                    {
                        saleId: this.tableData[index].saleId,
                        avatarUrl: this.tableData[index].avatarUrl,
                        userName: this.tableData[index].userName,
                        saleDate: this.tableData[index].saleDate,
                        saleText: this.tableData[index].saleText,
                        saleImage: this.tableData[index].saleImage
                    })
                    .then(res => {
                        console.log(res.data);
                        if (res.data.code == 200) {
                            alert('编辑成功')

                        }
                        if (res.data.code == 202) {
                            alert('编辑失败')
                        }
                    })
                    .catch(err => {
                        console.log('操作失败' + err);
                    })
            }
        },
        // 查
        async selectSale(index) {
            this.isselect = !this.isselect
            await this.$axios.post('http://localhost:3000/selSale',
                {
                    userName: this.select
                })
                .then(res => {
                    console.log(res.data);
                    if (res.data.code == 200) {
                        this.selectData = res.data.List
                    }
                    if (res.data.code == 400) {
                        this.selectData = res.data.List
                    }
                })
                .catch(err => {
                    console.log('操作失败' + err);
                })
        },
        // 分页
        //获取前10条数据
        async getData(index) {
            this.pageNo = index || this.pageNo
            await this.$axios.post('http://localhost:8080/pageSale', { page: this.pageNo, pageSize: this.pageCount }).then(res => {
                console.log(res.data.data);
                this.allData = res.data.data
            }).catch(error => {
                console.log(error);
            })
        },
        //当前页数据
        currentPage(currentPage) {
            this.currentNo = currentPage;
            console.log(this.currentNo)
            this.getData(this.currentNo)
        },
        //获取序号
        indexMethod(index) {
            return (this.currentNo - 1) * this.pageCount + index + 1;
        },
        //获取总页数
        getPageTotal() {
            axios.get('http://localhost:8080/getSaleData').then(res => {
                console.log(res.data.data);
                this.tableData = res.data.data;
                this.totalPage = Math.ceil(this.tableData.length / this.pageCount) * 10;
                console.log(this.totalPage);
            }).catch(error => {
                console.log(error)
            })
        },
        handleOpen(key, keyPath) {
            console.log(key, keyPath);
        },
        handleClose(key, keyPath) {
            console.log(key, keyPath);
        },
        toUser() {
            this.$router.push('./user')
        },
        toWuliu() {
            this.$router.push('./wuliu')
        },
        toAddress() {
            this.$router.push('./address')
        },
        toPinglun() {
            this.$router.push('./pinglun')
        },
    },
    mounted() {
        this.put()
    }
}

</script>
<style>
.con {
    height: 1000px;
}
.sale {
    background-color: white;
    width: 100%;
    line-height: 30px;
}

.djx {
    width: 16%;
    float: left;
    padding: 0;
    margin: 0;
}
.placeholder {
    border: 3px dashed #e6e6e6;
    min-height: 238px;
    padding-top: 158px;
    text-align: center;
    color: #cccccc;
    font-size: 18px;
    position: relative;
}

.webuploader-pick {
    position: relative;
    display: inline-block;
    border-radius: 4px;
    padding: 10px 18px;
    overflow: hidden;
    color: white;
    text-decoration: none;
    text-indent: 0;
    line-height: 20px;
    font-size: 12px;
    cursor: pointer;
}

.webuploader-pick input {
    position: absolute;
    right: 0;
    top: 0;
    opacity: 0;
    padding: 10px 18px;
    cursor: pointer;
}

.webuploader-pick:hover {
    border-color: #78C3F3;
    color: red;
    text-decoration: none;
}
</style>